import { useState } from "react";
import { Button, Form, Input, message } from "antd";
import { useNavigate } from "react-router-dom";
import { Login } from "@/api/interface";
import { loginApi } from "@/api/modules/login";
import { HOME_URL } from "@/config/config";
import { connect } from "react-redux";
import { setNickName, setToken } from "@/redux/modules/global/action";
import { useTranslation } from "react-i18next";
import { setTabsList } from "@/redux/modules/tabs/action";
import { UserOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { encrypt } from "@/utils/crypto";

const LoginForm = (props: any) => {
	const { t } = useTranslation();
	const { setToken, setTabsList, setNickName } = props;
	const navigate = useNavigate();
	const [form] = Form.useForm();
	const [formData, setFormData] = useState<Login.ReqLoginForm>({
		username: "",
		password: ""
	});
	const [loading, setLoading] = useState<boolean>(false);
	// 登录
	const onFinish = async (loginForm: Login.ReqLoginForm) => {
		setFormData(loginForm);
		handleLogin();
	};

	const handleLogin = async () => {
		try {
			setLoading(true);
			formData.password = encrypt(formData.password);
			const { data } = await loginApi(formData);
			setToken(data?.token);

			setNickName(data?.nickname);
			setTabsList([]);
			message.success("登录成功！");
			navigate(HOME_URL);
		} finally {
			setLoading(false);
		}
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};
	return (
		<>
			<Form
				form={form}
				name="basic"
				labelCol={{ span: 5 }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				size="large"
				autoComplete="off"
			>
				<Form.Item name="username" rules={[{ required: true, message: "请输入用户名" }]}>
					<Input placeholder="用户名：admin / user" prefix={<UserOutlined />} />
				</Form.Item>
				<Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
					<Input.Password autoComplete="new-password" placeholder="密码：123456" prefix={<LockOutlined />} />
				</Form.Item>
				<Form.Item className="login-btn">
					<Button
						onClick={() => {
							form.resetFields();
						}}
						icon={<CloseCircleOutlined />}
					>
						{t("login.reset")}
					</Button>
					<Button type="primary" htmlType="submit" loading={loading} icon={<UserOutlined />}>
						{t("login.confirm")}
					</Button>
				</Form.Item>
			</Form>
		</>
	);
};

const mapDispatchToProps = { setToken, setTabsList, setNickName };
export default connect(null, mapDispatchToProps)(LoginForm);
